<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="beans.*"%>	
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css/login.css">
<title>Insert title here</title>

</head>
<body>

	<div id="all">
		<div id="first">
			<div style="float: left">
				<img alt="" src="images/lock.png"> <span>欢迎进入登录窗口 </span>
			</div>

			<div id="register" style="float: right">
				<a href="register.jsp"> <img alt=""
					src="images/rabbit2.png"> <span>注册</span>
				</a>
			</div>
			<div style="clear: both"></div>
		</div>

		<div id="second">
			<form name="form1" method="post" action="">
				<table>
					<tr>
						<td>
							<table>
								<tr>
									<td>用户</td>
									<td style="position: relative;">
									<input type="text" id="userno" name="userno" value="q1101" onfocus="info.innerHTML=''" >
									<div style="position: absolute;left:100px;color:red;width: 120px"  id="info"></div>
									</td>
								</tr>
								<tr>
									<td>密码</td>
									<td><input type="text" id="userpwd" name="userpwd"
										value="111" onblur="checkvalidate()"></td>
								</tr>
								<tr>
									<td>验证码</td>
									<td>
										<input type="text" id="uservalid" name="uservalid" onkeyup="checkyanzhengma()">
									</td>
									<td><img id="validpic" alt="" src="GetyanzhengmaImgServlet"></td>								
									<td><input type="button" value="换"" onclick="changepic()"></td>
								</tr>
								
								<tr>
									<td colspan="2" style="color:red;font-size:10px;">
										<span>ajax来判断验证码:</span>
										<span id="yanzhengma"></span>
									</td>
								</tr>
															
								<tr>
									<td colspan="2"><input type="radio" name="userident"
										value="管理员" >管理员 <input type="radio"
										name="userident" value="普通用户" checked="checked">普通用户</td>
								</tr>
							</table>
						</td>
						<td><img alt="" src="images/pp.png"></td>
					
					</tr>
				</table>
			</form>

		</div>

		<div id="third">
			<!-- 以下#与javascript:void(0)都表示空链接，一般推荐使用javascript-->
 			<!--<a href="#" onclick="logincheck();return false;">  -->
			<a href="javascript:void(0)" onclick="logincheck();return false;"> 
				<img alt="" src="images/ok.png">
				登录
			</a>
		</div>

	</div>
	
	<script type="text/javascript">
	//功能：使用ajax检测用户名和密码的合法性。使用ajax好处是不整体刷新页面。
	function checkvalidate(){
		var xmlHttpRequest = new XMLHttpRequest();
		var params="userno="+form1.userno.value+"&userpwd="+form1.userpwd.value;
		xmlHttpRequest.open("get", "CheckValidateServlet?" + params, true);
		xmlHttpRequest.send(null);
		xmlHttpRequest.onreadystatechange = function() {
			if (xmlHttpRequest.readyState == 4) {
				if (xmlHttpRequest.status == 200) {
					info.innerHTML = xmlHttpRequest.responseText;
				} else {
					alert('您请求的页面发现错误！');
				}
			}
		}
	}
	
	//功能：ajax检测验证码是否正确
	function checkyanzhengma(){
		var xmlHttpRequest = new XMLHttpRequest();
		var str=form1.uservalid.value;
		str=trim(str.toUpperCase());
		var params="yanzhengma="+str;
		xmlHttpRequest.open("get", "CheckyanzhengmaServlet?" + params, true);
		xmlHttpRequest.send(null);
		xmlHttpRequest.onreadystatechange = function() {
			if (xmlHttpRequest.readyState == 4) {
				if (xmlHttpRequest.status == 200) {
					var data= xmlHttpRequest.responseText;
					var yzmobj=document.getElementById("yanzhengma");
					yzmobj.innerHTML = data;
				} else {
					alert('您请求的页面发现错误！');
				}
			}
		}
	}
	
	//功能：登录
	function  logincheck(){
		/*第3单元js代码
		var address=["mainadmin.jsp","main.jsp"];		
		var ident=form1.userident;//这里原写成userindent，运行不出来
		for(var i=0;i<ident.length;i++){
			if(ident[i].checked==true){
				window.location.href=address[i];
				//window.location.href=address[i]+"?userno="+form1.userno.value;
			}
		}
		//return false;目的是去除默读的跳转，也可以在html中写
		*/
		
		//第4单元代码
		
		//方法1，通过协议号，这是上课所述方法
		form1.action="UserServlet?id=1";//不能在这里使用"${checkpicCode}"判断验证码是否正确，到UserServlet?里去判断
		form1.submit();	//原想，在本页面去验证session中的checkpicCode是否正确，但事实是ajax到服务端设置的session，在本页不能立即起效果，故submit后才可
		
		//方法1-2，通过发送名，服务端通过反射找到相应的名，从而调用相应的方法
		//form1.action="login.do";
		//form1.submit();	
		
		//方法2
		/*var userno=form1.userno.value;
		var userpwd=form1.userpwd.value;
		var userident=form1.userident;
		for(var i=0;i<userident.length;i++){
			if(userident[i].checked==true){
				userident=userident[i].value;
			}
		}
		window.location.href="login-check.jsp?userno="+userno+"&userpwd="+userpwd+"&userident="+userident;
		*/		
	}
	
	
	//功能：切换验证码图片，不需要使用ajax，只要换一下img的src即可，要及时更新，必须后要面加一个参数，如time=
	function changepic(){
		var img = document.getElementById("validpic");		
		img.src = "GetyanzhengmaImgServlet?time=" + Math.random();
	}
	
	//功能：主要用于压缩将前后的空格去除
	function trim(str){
        //首先判断类型，是String类型才可以操作否则直接返回
        var type= typeof(str);
        if(type=='string'){
            str=str.replace(/^\s+/,"");//替换字符串开头的所有:空格，换页符，换行符，制表符
            str=str.replace(/\s+$/,"");//替换字符串结尾的所有:空格，换页符，换行符，制表符
        }
        return str;
	}

	</script>

</body>
</html>
